@font-face{font-family:"Open Sans";src:url(OpenSans-Regular.ttf) format(truetype);}
@font-face{font-family:"PermanentMarker";src:url(PermanentMarker.ttf) format(truetype);}
body{background-image:url(binding_dark.png);font-family:'Open Sans', monospace;margin:auto;padding-top:3%;width: 1080px;}
footer{color:whitesmoke;font-size:1em;font-weight:bold;text-align:right;}
h1 {
    font-size: 6em;
    text-align: center;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.2) 1px 1px 0px, rgba(0, 0, 0, 0.19) -1px -1px 0px;
    letter-spacing: -10px;
    text-rendering: optimizeLegibility;
}
h1 + p{margin:20px 0;text-align: center;}
h1 + p + a{}

.container .hero-unit{background-image:url(tweed.png);border-radius:5px;box-shadow:1px 1px 15px 4px #333;color:white;display:block;font-size:100%;line-height:22px;margin-bottom:15px;padding:10px 40px;}
.element{background:#888;border-top-right-radius:1.2em;box-shadow:2px 2px 0 grey;color:#222;cursor:pointer;float:left;height:150px;margin:5px;overflow:hidden;position:relative;width:150px;}
.element *{color:white;margin:0;position:absolute;}
.element .name{font-size:1em;top:90px;}
.element .symbol{font-size:4em;top:35px;}
.element .symbol,.element .name,.element .weight{text-align:center;text-shadow:1px 1px 3px #222;width:100%;}
.element .weight{font-size:1em;top:115px;}
.element.black{background-color:#342D22;}
.element.green{background-color:#21572F;}
.element.red{background-color:#B91102;}
.element.large{box-shadow:1px 1px 35px white!important;z-index:100;}
.element.large .name{font-size:1.5em;font-weight:bold;top:61px;}
.element.large .symbol{top:15px;}
.element.large .weight{top:110px;}
.element.large .weight,.element.large .symbol{color:lightgray;font-size:2em;}
.element.nope{opacity:0.3;}

.isotope .isotope-item{border:10px dotted #fff;border-radius:150px;box-shadow:inset 0 0 1px 1px rgba(0,0,0,0.1), 0 0 5px 1px rgba(90,90,90,0.1), inset 0 35px 1px rgba(255,255,255,0.2);}

#zotop-container{margin: 40px 0;padding:0;}

.btn-primary{
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219, 5, 5, 1);
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0px 9px 0px rgba(119, 15, 0, 1), 0px 9px 25px rgba(0,0,0,.7);
    transition: all .1s ease;
    font-size: 1.2em;
    display: block;
    cursor: pointer;
    text-align: center;
    width: 150px;
    margin-left: 42.2%;
    margin-top: 2%;
}

.btn-primary:active{
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}